<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的账户" name="first">
        <span>{{ zdtableData[0].networkNameId }}</span>
        <el-row :gutter="20">
          <el-col :span="7" class="border-r">
            <div class="flex-clone">
              <span>账户名称:{{ zdtableData[0].networkNameId }}</span>
              <span>创建时间:{{ zdtableData[0].createTime }}</span>
            </div>
          </el-col>
          <el-col :span="3" class="border-r">
            <div class="flex-clone">
              <span>账户状态</span>
              <span class="f-24-b">正常</span>
            </div>
          </el-col>
          <el-col :span="3" class="border-r">
            <div class="flex-clone">
              <span>账户当前余额</span>
              <span class="f-24-b">{{ zdtableData[0].accountBalance }}元</span>
            </div>
          </el-col>
          <el-col :span="3" class="border-r">
            <div class="flex-clone">
              <span>账户最低限额</span>
              <div>
                <span class="f-24-bo">{{ zdtableData[0].minimum }}</span>元
              </div>
            </div>
          </el-col>
          <el-col :span="2" class="border-r">
            <div class="flex-clone">
              <span>账户警戒金额</span>
              <div>
                <span class="f-24-bo">{{ zdtableData[0].warningAmount }}</span>元
              </div>
            </div>
          </el-col>
          <el-col :span="2" class="border-r">
            <div class="flex-clone">
              <span>基础余额</span>
              <div>
                <span class="f-24-bo">{{ zdtableData[0].baseBalance }}</span>元
              </div>
            </div>
          </el-col>
          <el-col :span="2" class="border-r">
            <div class="flex-clone">
              <span>可用余额</span>
              <div>
                <span class="f-24-bo">{{ zdtableData[0].accountBalance }}</span>元
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="flex-clone">
              <span>冻结金额</span>
              <div>
                <span class="f-24-bo">{{ zdtableData[0].frozenBalance }}</span>元
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="page">
              当前页共<span>{{ zdtableData.length }}</span>项
            </div>
          </el-col>
          <!-- <el-col :span="4">
            <div>
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="zdloading"
                :data="zdtableData"
                :th="zdth"
                :n="3"
              />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="充值扣款审核" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="form"
                :rules="rules"
                :model="form"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="网点名称" prop="networkNameId">
                  <el-select
                    v-model="form.networkNameId"
                    placeholder="请选择网点名称"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in netlist"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="交易金额">
                  <el-input-number v-model="form.expend" :min="0" :max="10" />
                </el-form-item>
                <el-form-item label="业务摘要">
                  <el-input
                    v-model="form.businessSummary"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="记账日期" prop="Time">
                  <el-date-picker
                    v-model="form.Time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="timepicker"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="czonSubmit">查询</el-button>
                  <elbutton :obj="form" @dj="czonClear" />
                </el-form-item>
                <el-form-item label="费用科目">
                  <el-select
                    v-model="form.subjectType"
                    placeholder="请选择费用科目"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="(item, index) in fykmlist"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="业务类型">
                  <el-select
                    v-model="form.businessId"
                    placeholder="请选择业务类型"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in ywlxlist"
                      :key="item.id"
                      :label="item.businessName"
                      :value="item.businessName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="收支类型">
                  <el-select
                    v-model="form.region"
                    placeholder="请选择收支类型"
                    style="width: 286px"
                  >
                    <el-option label="全部" value="0" />
                    <el-option label="收入" value="1" />
                    <el-option label="支出" value="2" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="page">
              当前页共<span>{{ cztableData.length }}</span>项
            </div>
          </el-col>
          <!-- <el-col :span="4">
            <div>
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="czloading"
                :data="cztableData"
                :th="czth"
                :n="3"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="form.pageDate.pageNum"
            :page-size="form.pageDate.pageSize"
            :total="cztotal"
            @size-change="czhandleSizeChange"
            @current-change="czhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getOutletsList } from '@/api/dashboard'
import { Getywlxlist, Getzbyflstable, Getfykmlist, Getmyzh } from '@/api/headquarters'
export default {
  data() {
    return {
      rules: {
        Time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        networkNameId: [
          { required: true, message: '请选择网点', trigger: 'change' }
        ]
      },
      // 网点名称列表
      netlist: [],
      //  业务类型下拉列表
      ywlxlist: [],
      //   费用科目列表
      fykmlist: [],

      activeName: 'first',
      cztotal: 0,
      czloading: false,
      zdloading: false,
      form: {
        businessId: '',
        businessSummary: '',
        endTime: '',
        expend: 0,
        networkNameId: '辽宁盘锦公司',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: '',
        subjectType: ''

      },
      czth: [],
      cztableData: [],
      zdth: [],
      zdtableData: []
    }
  },
  async mounted() {
    this.myzhangdan()
  },
  async created() {
    this.getnetlist()
    // 获取下拉业务类型下拉列表
    const res = await Getywlxlist()
    const qb = [{
      id: 0,
      businessName: '全部'
    }]
    this.ywlxlist = qb.concat(res.data)
    // 获取费用科目列表
    const res1 = await Getfykmlist()
    this.fykmlist = res1.data
  },
  methods: {
    async myzhangdan() {
      // 我的账单
      const myzd = await Getmyzh(this.form.networkNameId)
      if (myzd.code === 200) {
        this.zdtableData = myzd.data.list
        this.zdth = myzd.data.fields
      } else {
        this.zdtableData = []
      }
    },
    // 获取时间范围
    timepicker(value) {
      if (value !== null) {
        this.form.startTime = value[0]
        this.form.endTime = value[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 获取网点名称
    async getnetlist() {
      const res = await getOutletsList()
      this.netlist = res.data
    },
    // 充值查询
    async czonSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.czloading = true
          const res = await Getzbyflstable(this.form)
          console.log('充值', res)

          this.czloading = false
          if (res.code === 200) {
            this.cztableData = res.data.list.data
            this.cztotal = res.data.list.total
            this.czth = res.data.fields
          } else {
            this.cztableData = []
            this.cztotal = 0
          }
        } else {
          return false
        }
      })
    },
    // 充值分页
    czhandleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.form.pageDate.pageNum = 1
      this.czonSubmit()
    },
    czhandleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.czonSubmit()
    },
    // 重置
    czonClear(aaa) {
      this.form = aaa
    }
  }

}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-clone {
  display: flex;
  justify-content: space-around;
  // align-items: center;
  height: 80px;
  flex-flow: column;
}
.border-r {
  border-right: 1px solid #d8d8d8;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.f-24-b {
  font-size: 24px;
  color: #2087d0;
}
.f-24-bo {
  font-size: 24px;
  color: #333333;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.page > span {
  color: #2087d0;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
